<template>
  <div ref="target">
    <slot></slot>
  </div>
</template>
<style lang="scss">

</style>
<script>
let animation = weex.requireModule('animation')
let ANIMATION_KEYFRAMES = {
  bounceIn: [
    [0, {
      styles: {
        transform: 'scale(.75)'
      },
      timingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)'
    }],
    [60, {
      styles: {
        transform: 'scale(1.1)'
      },
      timingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)'
    }],
    [70, {
      styles: {
        transform: 'scale(.9)'
      },
      timingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)'
    }],
    [80, {
      styles: {
        transform: 'scale(1.2)'
      },
      timingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)'
    }],
    [90, {
      styles: {
        transform: 'scale(.97)'
      },
      timingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)'
    }],
    [100, {
      styles: {
        transform: 'scale(1)'
      },
      timingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)'
    }]
  ],
  shakeDown: [
    [0, {
      styles: {
        transform: 'translateY(0px)'
      },
      timingFunction: 'ease'
    }],
    [25, {
      styles: {
        transform: 'translateY(20px)'
      },
      timingFunction: 'ease'
    }],
    [50, {
      styles: {
        transform: 'translateY(0px)'
      },
      timingFunction: 'ease'
    }],
    [75, {
      styles: {
        transform: 'translateY(20px)'
      },
      timingFunction: 'ease'
    }],
    [100, {
      styles: {
        transform: 'translateY(0px)'
      },
      timingFunction: 'ease'
    }]
  ],
  bounceDown: [
    [0, {
      styles: {
        transform: 'translateY(-5px)'
      },
      timingFunction: 'ease'
    }],
    [60, {
      styles: {
        transform: 'translateY(40px)'
      },
      timingFunction: 'ease'
    }],
    [70, {
      styles: {
        transform: 'translateY(15px)'
      },
      timingFunction: 'ease'
    }],
    [80, {
      styles: {
        transform: 'translateY(30px)'
      },
      timingFunction: 'ease'
    }],
    [90, {
      styles: {
        transform: 'translateY(25px)'
      },
      timingFunction: 'ease'
    }],
    [100, {
      styles: {
        transform: 'translateY(30px)'
      },
      timingFunction: 'ease'
    }]
  ]
}
module.exports = {
  props: {
    type: {default: ''},
    duration: {default: 2000},
    delay: {default: 2000}
  },

  data () {
    return {
      idx: 0
    }
  },
  components: {},
  created () {

  },
  mounted () {
    if (!this.type) {
      return
    }
    this.keyframe = ANIMATION_KEYFRAMES[this.type]
    this.doAnimation()
  },
  methods: {
    doAnimation () {
      let _delay = 0
      if (this.idx >= this.keyframe.length - 1) {
        this.idx = 0
        _delay = this.delay
      }
      let duration = (this.keyframe[this.idx + 1][0] -
          this.keyframe[this.idx][0]) * this.duration / 100
      let params = this.keyframe[this.idx][1]
      animation.transition(this.$refs.target, {
        styles: params.styles,
        timingFunction: params.timingFunction,
        duration: duration, // ms
        delay: _delay // ms
      }, () => {
        // modal.alert({message: JSON.stringify(params)})
        this.idx++
        this.doAnimation()
      })
    },
    doClick () {
      this.$emit('click')
    }
  }
}
</script>
